<template>
  <div>
    <table class="table table-bordered table-vertical-middle text-center" v-loading="loading">
      <thead>
        <tr>
          <th>序号</th>
          <th>报表名</th>
          <th>报表说明</th>
          <th>
            <span>季度</span>
            <el-date-picker
              class="text-year-picker"
              v-model="yearDate"
              type="year"
              :clearable="false"
              prefix-icon="el-icon-caret-bottom"
              format="(yyyy年)"
              placeholder="选择年"
            ></el-date-picker>
          </th>
          <!-- <th>新增</th> -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="report in tableData" :key="report.index">
          <td>{{ report.index }}</td>
          <td class="text-left">{{ report.name }}</td>
          <td class="text-left">{{ report.desc }}</td>
          <td>
            <ul class="list-inline">
              <li class="list-inline-item" v-for="(di, j) in report.disabled" :key="`q-${j}`">
                <el-button
                  type="text"
                  :class="di ? 'text-muted' : ''"
                  :disabled="di"
                  @click="handleView(report.index, j + 1)"
                >
                  {{ enumQuarter[j + 1] }}季度
                </el-button>
              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
    <supervise-quarter-industry-dialog
      :visible.sync="industryVisible"
    ></supervise-quarter-industry-dialog>
    <supervise-quarter-profit-dialog
      :visible.sync="profitVisible"
    ></supervise-quarter-profit-dialog>
    <supervise-quarter-business-dialog
      :visible.sync="businessVisible"
    ></supervise-quarter-business-dialog>
    <supervise-quarter-subsidy-dialog
      :visible.sync="subsidyVisible"
    ></supervise-quarter-subsidy-dialog>
    <supervise-quarter-risk-dialog :visible.sync="riskVisible"></supervise-quarter-risk-dialog>
    <supervise-quarter-bond-dialog :visible.sync="bondVisible"></supervise-quarter-bond-dialog>
    <supervise-quarter-policy-dialog
      :visible.sync="policyVisible"
    ></supervise-quarter-policy-dialog>
  </div>
</template>

<script>
import { enumQuarter } from '@/credit/views/city/report/reportMixins'
import SuperviseQuarterIndustryDialog from '@/credit/views/city/report/SuperviseQuarterIndustryDialog'
import SuperviseQuarterProfitDialog from '@/credit/views/city/report/SuperviseQuarterProfitDialog'
import SuperviseQuarterBusinessDialog from '@/credit/views/city/report/SuperviseQuarterBusinessDialog'
import SuperviseQuarterSubsidyDialog from '@/credit/views/city/report/SuperviseQuarterSubsidyDialog'
import SuperviseQuarterRiskDialog from '@/credit/views/city/report/SuperviseQuarterRiskDialog'
import SuperviseQuarterBondDialog from '@/credit/views/city/report/SuperviseQuarterBondDialog'
import SuperviseQuarterPolicyDialog from '@/credit/views/city/report/SuperviseQuarterPolicyDialog'
const date = new Date()
export default {
  components: {
    SuperviseQuarterIndustryDialog,
    SuperviseQuarterProfitDialog,
    SuperviseQuarterBusinessDialog,
    SuperviseQuarterSubsidyDialog,
    SuperviseQuarterRiskDialog,
    SuperviseQuarterBondDialog,
    SuperviseQuarterPolicyDialog,
  },
  props: {},
  data() {
    return {
      enumQuarter,
      loading: false,
      yearDate: date,
      tableData: [
        {
          index: 1,
          name: '行业发展与监管有关情况',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 2,
          name: 'DBG03收益情况表',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 3,
          name: 'DBG04业务状况表',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 4,
          name: 'DBG05风险指标表（季度）',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 5,
          name: 'DBJ01保证金情况表（季度）',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 6,
          name: 'DBJ02产业政策情况表（季度）',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 7,
          name: 'DBJ03政策补贴情况表（季度）',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
      ],
      industryVisible: false,
      profitVisible: false,
      businessVisible: false,
      subsidyVisible: false,
      riskVisible: false,
      bondVisible: false,
      policyVisible: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleView(reportIndex, _quarterIndex) {
      switch (reportIndex) {
        case 1:
          this.industryVisible = true
          break
        case 2:
          this.profitVisible = true
          break
        case 3:
          this.businessVisible = true
          break
        case 4:
          this.riskVisible = true
          break
        case 5:
          this.bondVisible = true
          break
        case 6:
          this.policyVisible = true
          break
        case 7:
          this.subsidyVisible = true
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.text-year-picker {
  width: 82px;
  /deep/ .el-input__inner {
    border: none;
    padding: 0 2px;
    &:focus {
      box-shadow: none;
    }
  }
  /deep/ .el-input__prefix {
    left: auto;
    right: 5px;
  }
}
</style>
